<template>
  <el-card class="carts">
    <div class="carts-hd"
         v-if="userInfo">
      <div class="shop-l">
        <span class="shopLis">共0件商品</span>
        <p class="total">合计:<strong class="price">￥ 8:00</strong></p>
      </div>
      <div class="addCarts">
        <el-button type="primary">加入购物车</el-button>
      </div>
    </div>

    <div class="no-shops">
      <span class="cart_icon"> <i class="iconfont">&#xe60c;</i>
        <h3>您的购物车竟然是空的!</h3>
      </span>
    </div>

  </el-card>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      data() {
        return {}
      }
    }
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.el-header .header-hd .header-r .r-lis div[data-v-af5d225e] {
  padding: 0 !important;
}

.carts {
  position: absolute;
  top: 80px;
  right: 20px;
  height: 350px;
  width: 350px;
  background-color: #fff;
  z-index: 99999999 !important;

  .carts-hd {
    height: 70px;
    background-color: #f5f5f5;
    padding: 0 12px;
    position: relative;
    width: 100%;

    .shop-l {
      line-height: 30px;

      .shopLis {
        font-size: 14px;
        color: #999;
      }

      .total {
        font-size: 17px;

        .price {
          color: red;
        }
      }
    }

    .addCarts {
      position: absolute;
      right: 15px;
      bottom: -12px;
    }
  }

  .no-shops {
    text-align: center;
    height: 280px;
    .cart_icon {
      display: block;
      padding-top: 60px;
      i {
        font-size: 80px;
        color: #ccc;
      }
      h3 {
        font-size: 20px;
      }
    }
  }
}
</style>
